import React, { useState, useEffect } from 'react';
import { Grid } from '@material-ui/core';
import BookCard from './BookCard';

// interface IState {
//     volumeInfo: any[]
//     title: any[]
//     links: any[];
//     data: any[];
// }

interface IBookListProps {
    SearchQuery: (string | null);
    [propName: string]: any;
}

function BookList(props: IBookListProps) {
    const [cards, setCards] = useState<any[]>([])
    useEffect(() => {
        fetch('https://www.googleapis.com/books/v1/volumes?q=' + props.SearchQuery) //https://www.googleapis.com/books/v1/volumes?q=
            .then(response => response.json())
            .then(response => {
                setCards(response.items);
            })
            .catch(console.log);
    }, [props.SearchQuery]);

    function HandleCards() {
        const List = cards.map((item, i) => {
            var thumbnail = '';
            if (!item.volumeInfo.imageLinks) {
                return;
            } else {
                thumbnail = item.volumeInfo.imageLinks.thumbnail;
            }
            return (
                <div className='col-lg-4 mb-3' key={i}>
                    <BookCard
                          thumbnail={thumbnail}
                          title={item.volumeInfo.title}
                          pageCount={item.volumeInfo.pageCount}
                          language={item.volumeInfo.language}
                          authors={item.volumeInfo.authors}
                          publisher={item.volumeInfo.publisher}
                        Description={item.volumeInfo.description}
                    />
                </div>
            );
        });
        return List;
    }

    const List = HandleCards();

    return <div className="BookList">
        { List }
    </div>;
}

export default BookList